<template>
  <a-modal
    :title="'详情'"
    :width="1000"
    :visible="visible"
    :maskClosable="false"
		destroyOnClose
    :confirmLoading="confirmLoading"
		:footer="null"
    @cancel="handleCancel"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">
				<el-row>
					<a-col :span="12">
						<!-- 22--{{ form.getFieldsValue() }} -->
						<a-form-item
							label="物料编码"
							:labelCol="labelCol"
							:wrapperCol="wrapperCol"
							has-feedback=""
						>
							<a-input disabled placeholder="空" :value="record.materialCode"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							label="物料名称"
							:labelCol="labelCol"
							:wrapperCol="wrapperCol"
							has-feedback=""
						>
							<a-input disabled placeholder="空" :value="record.materialName"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							label="规格"
							:labelCol="labelCol"
							:wrapperCol="wrapperCol"
							has-feedback=""
						>
							<a-input disabled placeholder="空" :value="record.materialModelNumber"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							label="供应商"
							:labelCol="labelCol"
							:wrapperCol="wrapperCol"
							has-feedback=""
						>
							<a-input disabled placeholder="空" :value="record.orgName"/>
						</a-form-item>
					</a-col><a-col :span="12">
						<a-form-item
							label="采购单号"
							:labelCol="labelCol"
							:wrapperCol="wrapperCol"
							has-feedback=""
						>
							<a-input disabled placeholder="空" :value="record.orderNumber"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item
							label="数量"
							:labelCol="labelCol"
							:wrapperCol="wrapperCol"
							has-feedback=""
						>
							<a-input disabled placeholder="空" :value="record.num"/>
						</a-form-item>
					</a-col>
					<!-- 22--{{ fileList }}  <br>
					33--{{ form.getFieldValue('image') }} -->
					<a-col :span="24">
						<a-form-item
							label="物料图片"
							:labelCol="labelColBlock"
							:wrapperCol="wrapperColBlock"
							has-feedback=""
						>
							<a-input 
								v-show="false" 
								:disabled="false" 
								placeholder="请上传图片"
								v-decorator="['image', {rules: [{required: false, message: '请上传图片！'}]}]"
							/>
							<fc-upload :disabled="true" :file-list="fileList" :handle-file-list-string-change="handleFileListStringChange"/>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item
							label="备注"
							:labelCol="labelColBlock"
							:wrapperCol="wrapperColBlock"
							has-feedback=""
						>
							<a-textarea disabled :rows="4" placeholder="请输入备注" :value="record.remark"></a-textarea>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item
							label="状态"
							:labelCol="labelColBlock"
							:wrapperCol="wrapperColBlock"
							has-feedback=""
						>
							<a-tag
								style="width:70px; text-align: center;"
								:color="record.defectiveStatus==1 ? 'blue' :
									record.defectiveStatus==2 ? 'orange' :
									record.defectiveStatus==3 ? 'green' :
									record.defectiveStatus==4 ? 'pink' :
									record.defectiveStatus==5 ? 'green' :
									''"
							>
								{{ 
									record.defectiveStatus==1 ? '待处理' :
									record.defectiveStatus==2 ? '待补发' :
									record.defectiveStatus==3 ? '已扣款' :
									record.defectiveStatus==4 ? '待入库' :
									record.defectiveStatus==5 ? '已入库' :
									''
								}}
							</a-tag>
						</a-form-item>
					</a-col>
					
					<a-col :span="24">
						<a-form-item
							:labelCol="labelColBlock"
							:wrapperCol="labelColBlock"
							label="返回方式"
						>
							<a-radio-group 
								v-decorator="['returnMethod', {rules: [{ required: true, message: '请选择！' }]}]"
								style="width:100%"
								:disabled="record.defectiveStatus!=1"
							>
								<a-radio :value="1">寄回</a-radio>
								<a-radio :value="2">供应商带回</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="24" v-if="form.getFieldValue('returnMethod')==1">
						<a-form-item
							label="物流信息"
							:labelCol="labelColBlock"
							:wrapperCol="labelColBlock"
							has-feedback=""
						>
							<a-input :disabled="record.defectiveStatus!=1" style="width:100%" placeholder="请输入" v-decorator="['logisticsInfo']"/>
						</a-form-item>
					</a-col>
				</el-row>
      </a-form>
			<div style="width: 100%; text-align: right;">
					<a-button v-if="record.defectiveStatus==1" type="primary" @click="handleSubmit(1)">确认</a-button>
					<a-button 
						v-if="record.defectiveStatus==2&&materialType==$businessEnum.MATERIAL_TYPE_ENUM.material.id" 
						type="primary" 
						@click="handleSubmit(2)"
					>确认发货</a-button>
					<a-button 
						v-if="record.defectiveStatus==2&&materialType==$businessEnum.MATERIAL_TYPE_ENUM.cable.id" 
						type="primary" 
						@click="handleSubmit(3)"
					>确认扣款</a-button>
					<a-button v-if="record.defectiveStatus==4" type="primary" @click="handleSubmit(4)">确认入库</a-button>
					<a-button style="margin-left: 8px" @click="handleCancel">取消</a-button>
			</div>
    </a-spin>
  </a-modal>
</template>

<script>
	import { 
		handle, //处理（物料退回）
		confirmShipment, //确认发货、扣款
		confirmWarehousing,  //确认入库
	} from '@/api/modular/main/badPool'
	import FcUpload from '@/components/FCUpload/FcUpload'


  export default {
		components:{
			FcUpload,
		},
		props:['materialType'],
    data () {
      return {
				dialogType:'',
				fileList:[],
				record:{},
				selectedObj:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
				labelColBlock: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperColBlock: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        orgTree: [],
        visible: false,
        confirmLoading: false,
				isPackaging: false,
				needDeleteFileUid: null,
				previewVisible: false,
				previewImage: '',
        formLoading: false,
        form: this.$form.createForm(this),
        orgTypes: []
      }
    },
		
    methods: {
      // 初始化方法
      init (dialogType, record) {
				this.record = {...record}
				this.dialogType = dialogType
        this.visible = true
				this.$nextTick(()=>{
					// 编辑和详情需要回显
					this.form.setFieldsValue({
						returnMethod: record.returnMethod,
						image: record.image,
					})
					this.fileList = record.image.split(',').map(fileID => {
						return {
							uid: fileID,
							name: fileID,
							status: 'done',
							url: `${this.$store.state.baseUrl}/sysFileInfo/preview?id=${fileID}`,
							fileID: fileID
						}
					})
					console.log("this.fileList",this.fileList);
					
					setTimeout(()=>{
						this.form.setFieldsValue({
							logisticsInfo: record.logisticsInfo
						})
					}, 300)
				})
      },
			handleFileListStringChange(fileListString) {
				// console.debug(`fileListString: ${fileListString}`)
				this.form.setFieldsValue({image: fileListString})
			},
			selected(row){
				this.selectedObj = {
					materialId: row.materialId,
					materialName: row.materialName,
				}
				this.form.setFieldsValue({
					materialId: row.materialId,
				})
			},
      handleSubmit (e) {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
						let api = e==1 ? handle : e==2||e==3 ? confirmShipment : e==4 ? confirmWarehousing : '--'
						let query
						if(e==1){
							query = {
								id: this.record.id,
								...values,
							}
						} else if(e==2||e==3){
							query = {
								id: this.record.id,
								type: e-1
							}
						} else if(e==4){
							query = {
								id: this.record.id,
							}
						}
            api(query).then((res) => {
              if (res.success) {
                this.$message.success(`操作成功`)
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error(`操作失败` + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
				this.selectedObj = {}
        this.visible = false
      }
    }
  }
</script>

<style scoped>
.inputDiv{
	width: 100%;
	line-height: 32px;
	cursor: pointer;
	background: #eee;
	border: 1px solid #bbb;
	padding-left: 10px;
}
::v-deep .ant-form-item-control{
	min-width: 250px;
}
</style>
